<template>
    <div>
        <h3>发表评论</h3>
        <hr>
        <textarea name="" id="" v-model="msg" cols="30" rows="4" placeholder="请输入内容（最多吐槽120字"></textarea>
        <mt-button type="primary" size="large" @click="postComment">发表评论</mt-button>
        <div class="cmt-list">
            <div class="cmt-item" v-for="(item,index) in commentList" :key="item.add_time">
                <div class="cmt-title">
                    第{{index+1}}楼&nbsp;&nbsp;用户：{{item.user_name}}&nbsp;&nbsp;发表时间：{{item.add_time | dateFormat}}
                </div>
                <div class="cmt-body">
                    {{item.content === 'undefined'? ' ':item.content}}
                </div>
            </div>
        </div>
        <mt-button type="danger" size="large" @click="getMore">加载更多</mt-button>

    </div>
</template>

<script>
import { Toast } from 'mint-ui'
export default {
    data() {
        return {
            pageIndex: 1,
            commentList: [],
            msg: '' //输入的内容
        }
    },
    props: ['id'],
    created() {
        this.getComments()
    },
    methods: {
        getComments() {
            this.$http.get(`/api/getcomments/${this.id}?pageindex=${this.pageIndex}`)
            .then(result => {
                console.log(result)
                if (result.data.status === 0) {
                    // this.commentList = result.data.message
                    this.commentList = this.commentList.concat(result.data.message)
                }else{
                    Toast('获取数据失败')
                }
            })
        },
        getMore() {
            this.pageIndex++
            this.getComments()
        },
        postComment() {
            //
            console.log(this.msg)
            if (this.msg.trim().length === 0) {
                return Toast('评论内容不能为空')
            }
            else{
                this.$http.request({
                    url:"/api/postcomment/" + this.$route.params.id,
                    method:'post',
                    headers: {
                        "Content-type": "application/x-www-form-urlencoded",
                        // "Accept": 'application/x-www-form-urlencoded'
                    },
                    data: {
                        content:this.msg.trim()
                    }
                })
                .then(res => {
                    console.log(res)
                    if (res.data.status === 0) {
                        var cmt = {
                            user_name: '匿名用户',
                            add_time: Date.now(),
                            content:this.msg.trim()
                        }
                        this.commentList.unshift(cmt)
                        this.msg = ''
                    }
                })
            }
        }
    },
    
}
</script>

<style lang="scss" scoped>
    hr{
        margin: 0.1rem 0;
    }
    textarea{
        margin-bottom: 0rem;
        font-size:0.14rem;
    }
    h3{
        font-size: 0.18rem;

    }
    .cmt-list{
        margin: 0.05rem 0;
        .cmt-item{
            font-size:0.13rem;
            .cmt-title{
                line-height: 0.3rem;
            }background-color: #ccc;
            .cmt-body{
                line-height: 0.3rem;
                text-indent: 2em;
            }
        }
    }
</style>